<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<title>element组件2</title>
<style>
/* row行  col列*/

/* 栅格布局 */
.el-row{
margin-bottom: 20px;

}
.el-col{
border-radius: 4px;
}
.content{
border-radius: 4px;
color:#ff99e9;
text-align: center;
line-height: 50px;
background: #7f6a2c;
min-height: 50px;
}

</style>

</head>
<body>
<div id="app">
	
	<el-row :gutter="20"><!-- 24格布局 -->
		
	<el-col :span="12"><div class="content">
	<el-button>我是帅比</el-button>
	</div></el-col>
	<el-col :span="12"><div class="content">
	<el-button>我是大帅比</el-button>
	</div></el-col>
	
	</el-row>
	
	<el-row :gutter="20">
	<el-col :span="6"><div class="content"></div></el-col>
	<el-col :span="6"><div class="content"></div></el-col>
	<el-col :span="6"><div class="content"></div></el-col>
	<el-col :span="6"><div class="content"></div></el-col>
	</el-row>
	
	<el-row :gutter="20">
	<el-col :span="6"><div class="content"></div></el-col>
	<el-col :span="6"><div class="content"></div></el-col>
	<el-col :span="6"><div class="content"></div></el-col>
	<el-col :span="6"><div class="content"></div></el-col>
	
	</el-row>
	
	<el-row :gutter="20">
	<el-col :span="4"><div class="content"></div></el-col>
	<el-col :span="4"><div class="content"></div></el-col>
	<el-col :span="4"><div class="content"></div></el-col>
	<el-col :span="4"><div class="content"></div></el-col>
	<el-col :span="4"><div class="content"></div></el-col>
	<el-col :span="4"><div class="content"></div></el-col>
	
	</el-row>
	
	

<!-- 	<el-button>按钮</el-button> -->
<!-- <el-row> -->
<!-- <el-col><div class="content"></div></el-col> -->

<!-- <el-col>
<div class="content"></div>
</el-col> -->
<!-- 只能是2列 不能封格 -->

<!-- 	<el-col>
<div class="content"></div>
</el-col> -->
<!-- </el-row> -->

</div>
<script>
new Vue({
el:'#app',

})
</script>
</body>
</html>
